@import '../common/style/base.less';

@textarea-padding: var(--td-textarea-padding, 32rpx);
@textarea-label-padding-bottom: @spacer;
@textarea-indicator-text-padding-top: @spacer; // 计数器文本顶部间距
@textarea-indicator-text-align: right; // 计数器文本对齐方式
@textarea-border-width: 2rpx; // 文本框边框大小
@textarea-indicator-text-font: @font-body-small; // 计数器文本大小
@textarea-label-font: @font-body-medium; // 标签文本大小
@textarea-text-font: @font-body-large; // 输入框文本大小
@textarea-placeholder-font: @font-body-medium; // 占位符文本大小

// 文本框背景颜色
@textarea-background-color: var(--td-textarea-background-color, @bg-color-container);
// 占位符文本颜色
@textarea-placeholder-color: var(--td-textarea-placeholder-color, @text-color-placeholder);
// 输入框文本颜色
@textarea-text-color: var(--td-textarea-text-color, @text-color-primary);
// 标签文本颜色
@textarea-label-color: var(--td-textarea-label-color, @text-color-primary);
// 计数器文本颜色
@textarea-indicator-text-color: var(--td-textarea-indicator-text-color, @text-color-placeholder);
// 文本框圆角大小
@textarea-border-radius: var(--td-textarea-border-radius, @radius-default);
// 文本框边框颜色
@textarea-border-color: var(--td-textarea-border-color, @component-border);
// 文本框禁用状态时的输入文本颜色
@textarea-disabled-text-color: var(--td-textarea-disabled-text-color, @text-color-disabled);

.@{prefix}-textarea {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: @textarea-padding;
  background-color: @textarea-background-color;

  &__label:not(:empty) {
    font: @textarea-label-font;
    color: @textarea-label-color;
    flex-shrink: 0;
    padding-bottom: @textarea-label-padding-bottom;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  &__wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1 1 auto;
    overflow: hidden;

    &-inner {
      flex: 1 1 auto;
      box-sizing: border-box;
      width: inherit;
      min-width: 0;
      min-height: 20px;
      margin: 0;
      padding: 0;
      text-align: left;
      background-color: transparent;
      border: 0;
      resize: none;
      font: @textarea-text-font;
      color: @textarea-text-color;
    }
  }

  &__placeholder {
    color: @textarea-placeholder-color;
    font: @textarea-placeholder-font;
  }

  &__indicator:not(:empty) {
    flex-shrink: 0;
    color: @textarea-indicator-text-color;
    font: @textarea-indicator-text-font;
    text-align: @textarea-indicator-text-align;
    padding-top: @textarea-indicator-text-padding-top;
  }

  &--border {
    border-radius: @textarea-border-radius;
    position: relative;

    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border: @textarea-border-width solid @textarea-border-color;
      border-radius: inherit;
      pointer-events: none;
    }
  }

  .@{prefix}-is-disabled {
    color: @textarea-disabled-text-color;
  }
}
